import BasicCanvas from './BasicCanvas'

export default class LineCanvas extends BasicCanvas {
  colors = ['#27ae60', '#2980b9', '#d35400', '#2c3e50', '#8c7ae6', '#192a56', '#40739e']
  private margin = 40
  private step = 40
  private column = 80
  private titleColumn = 100

  constructor(canvas: HTMLCanvasElement, canvasConfig: CanvasConfig, private lineData: LineDataConfig[]) {
    super(canvas, canvasConfig)
    this.init()
  }

  init() {
    if (this.lineData) {
      this.canvas.width = this.titleColumn + this.column * this.lineData.length
      this.canvas.height = this.step * 3
    }
  }

  draw() {
    this.drawGrid()
    this.drawTName()
    this.drawSpan()
    this.drawCalcLine()
    // this.drawZiWire()
  }

  private drawGrid() {
    const lineWidth = 0.3
    const color = '#34495e'
    const width = Math.max(...this.lineData.map((data) => data.x))

    for (let i = 0; i < 4; i++) {
      // 绘制横线
      const startX = 0
      super.drawLine(
        [startX, this.step * i],
        [width + this.canvasConfig.margin.left + this.margin, this.step * i],
        lineWidth,
        color,
      )

      // 绘制左侧边缘纵线
      super.drawLine([this.titleColumn, this.step * (i - 1)], [this.titleColumn, this.step * i], lineWidth, color)

      // // 绘制左侧边缘纵线
      // super.drawLine(
      //   [width + this.margin + this.canvasConfig.margin.left, this.step * (i - 1)],
      //   [width + this.margin + this.canvasConfig.margin.left, this.step * i],
      //   lineWidth,
      //   color,
      // )
    }

    // 绘制塔号网格
    this.lineData.map((_, index) => {
      super.drawLine(
        [this.column * (index + 1) + this.titleColumn, 0],
        [this.column * (index + 1) + this.titleColumn, this.step],
        lineWidth,
        color,
      )
    })

    // 绘制档距网格
    this.lineData.map((_, index) => {
      // const { x } = data
      super.drawLine(
        [this.column * index + this.column / 2 + this.titleColumn, this.step],
        [this.column * index + this.column / 2 + this.titleColumn, this.step * 2],
        lineWidth,
        color,
      )
    })

    // 绘制线长网格
    this.lineData.map((_, index) => {
      // const { x } = data
      super.drawLine(
        [this.column * index + this.column / 2 + this.titleColumn, this.step * 2],
        [this.column * index + this.column / 2 + this.titleColumn, this.step * 3],
        lineWidth,
        color,
      )
    })
  }

  private drawTName() {
    // 绘制标题
    this.ctx.save()
    this.ctx.translate(this.titleColumn / 2, this.step * 0.5)
    this.ctx.scale(1, -1)
    super.drawText('塔  号', [0, 0])
    this.ctx.restore()
    // 绘制tName
    this.lineData.map((data, index) => {
      const { tName } = data
      this.ctx.save()
      this.ctx.translate(this.column * index + this.column / 2 + this.titleColumn, this.step * 0.5)
      this.ctx.scale(1, -1)
      super.drawText(tName, [0, 0], '12px consolas', 'center', 'middle')
      this.ctx.restore()
    })
  }

  private drawSpan() {
    // 绘制标题
    this.ctx.save()
    this.ctx.translate(this.titleColumn / 2, this.step * 1.5)
    this.ctx.scale(1, -1)
    super.drawText('档  距', [0, 0])
    this.ctx.restore()
    // 绘制span
    this.lineData.map((data, index) => {
      const { btSpan } = data
      const step = this.step * 1.5
      if (btSpan) {
        this.ctx.save()
        this.ctx.translate(this.titleColumn + this.column * (index + 1), step)
        this.ctx.scale(1, -1)
        super.drawText(btSpan.toString() + 'm', [0, 0], '12px consolas', 'center', 'middle')
        this.ctx.restore()
      }
    })
  }

  private drawCalcLine() {
    // 绘制标题
    this.ctx.save()
    this.ctx.translate(this.titleColumn / 2, this.step * 2.5)
    this.ctx.scale(1, -1)
    super.drawText('计算线长', [0, 0])
    this.ctx.restore()
    // 绘制line
    this.lineData.map((data, index) => {
      const { line } = data
      const step = this.step * 2.5
      if (line) {
        this.ctx.save()
        this.ctx.translate(this.titleColumn + this.column * (index + 1), step)
        this.ctx.scale(1, -1)
        super.drawText(line.toString() + 'm', [0, 0], '12px consolas', 'center', 'middle')
        this.ctx.restore()
      }
    })
  }

  // private drawZiWire() {
  //   // 绘制标题
  //   for (let index = 0; index < this.ziDaoNum; index++) {
  //     this.ctx.save()
  //     this.ctx.translate(this.canvasConfig.margin.left / 2 - this.margin / 2, this.step * 3.5 + this.step * index)
  //     this.ctx.scale(1, -1)
  //     super.drawText(`${index + 1}#子导线`, [0, 0])
  //     this.ctx.restore()
  //   }

  //   // 绘制子导线
  //   this.wireData.map((wire) => {
  //     const { startBetId, startBet_left_long, betIds, endBetId, endBet_left_long, ziWire_id } = wire

  //     this.ctx.save()
  //     this.ctx.translate(this.canvasConfig.margin.left, this.step * 3.5 + ziWire_id * this.step)
  //     this.ctx.scale(1, -1)

  //     // 绘制开始的子导线
  //     const { x, btSpan } = this.lineData[startBetId]
  //     super.drawLine([x + startBet_left_long, 0], [x + btSpan, 0], 24, this.colors[wire.id])

  //     // 绘制填满区段的子导线
  //     betIds.map((id) => {
  //       const { x, btSpan } = this.lineData[id]
  //       super.drawLine([x, 0], [x + btSpan, 0], 24, this.colors[wire.id])
  //       const txt = `${wire.id}导线(${wire.long}m),展放${wire.show}m,剩余${wire.remain}m`
  //       super.drawText(txt, [x + btSpan / 2, 0], '12px consolas', 'center', 'middle', '#dcdde1')
  //     })

  //     // 绘制结束的子导线
  //     const { x: x_endBet } = this.lineData[endBetId]
  //     super.drawLine([x_endBet, 0], [x_endBet + endBet_left_long, 0], 24, this.colors[wire.id])
  //     this.ctx.restore()
  //   })
  // }
}
